<template>
    <van-nav-bar title="" left-text="返回" left-arrow style="background-color: #059669;color: white">
        <template #left>
            <span @click="show = true">
                <van-icon name="user" style="color: white;margin-right: 12px" size="18"/>
                {{ userInfo.nickname }}
            </span>
        </template>
        <template #right>
        <span @click="toPage('/myRecord')">
         我的记录
        <van-icon name="arrow" style="color: white;margin-left: 6px" size="18"/>
      </span>
        </template>
    </van-nav-bar>
    <div class="home-container">
        <div class="page-title">欢迎来到，书来书往</div>
        <div class="page-subtitle">一个便捷图书捐赠与借阅平台，助力知识流转。</div>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>
                <van-image width="100%" fit="cover" src="../../public/banner2.png"/>
            </van-swipe-item>
        </van-swipe>
        <!-- 书籍统计卡片 -->
        <van-grid class="card-container" :column-num="2">
            <van-grid-item class="top-l-box">
                <span>已漂入: {{ homeInfo.inNum }} 本</span>
            </van-grid-item>
            <van-grid-item class="top-r-box">
                <span>已漂出: {{ homeInfo.outNum }} 本</span>
            </van-grid-item>
        </van-grid>

        <!-- 操作按钮 -->
        <div class="action-buttons">
            <van-button round @click="handleBookIn" class="home-btn"
                        style="background-color: #10b981;color: white;"
                        :style="{'-webkit-tap-highlight-color': 'transparent'}">
                <van-icon name="point-gift"/>
                漂入
            </van-button>
            <van-button round @click="handleBookOut" class="home-btn"
                        style="background-color: #d1fae5;color: #047857;"
                        :style="{'-webkit-tap-highlight-color': 'transparent'}">
                <van-icon name="share"/>
                漂出
            </van-button>
        </div>

        <!-- 最新入库 -->
        <van-cell-group class="recommendations-card">
            <van-cell style="color: rgb(16, 185, 129);font-weight: bold;" title="最新入库" value="更多" @click="toBookList" is-link/>
            <van-cell v-for="(book, index) in recommendedBooks" :value="book.storeTime.substring(0, 10)" :key="index"
                      :title="book.title.length > 12 ? book.title.slice(0, 12) + '...' : book.title"/>
        </van-cell-group>
        <van-action-sheet
            v-model:show="show"
            :actions="actions"
            cancel-text="取消"
            close-on-click-action
            @select="onSelect"/>

    </div>
    <div class="main-footer">成都市武侯区图书馆主办 & 九孔科技提供技术支持</div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {useRouter} from "vue-router";
//@ts-ignore
import {bookApi} from "../api/lbBook.ts";
//@ts-ignore
import {authApi} from "../api/auth.ts";
import {onMounted} from 'vue';
import {showToast, showConfirmDialog} from 'vant';

const router = useRouter()
const recommendedBooks = ref([
    {title: "《等一切风平浪静》", storeTime: "2024-05-06"},
]);
const homeInfo = ref({
        inNum: 0,
        outNum: 0,
        canOut: 0,
    }
);
const userInfo = ref({
        "id": 4,
        "nickname": "159******9999",
        "avatar": "",
        "mobile": "15999999999",
        "sex": 0,
        "point": 0,
        "experience": 0,
        "level": null,
        "brokerageEnabled": null
    }
);

const toPage = (path: string) => {
    //跳转到首页
    router.push({path: path});
};

// 跳转到书籍列表页面
const toBookList = () => {
    router.push({path: '/bookList'});
};

// 处理漂入按钮点击，防止iOS双击缩放
const handleBookIn = (event: Event) => {
    event.preventDefault();
    event.stopPropagation();
    toPage('/bookIn');
};

// 处理漂出按钮点击，防止iOS双击缩放
const handleBookOut = (event: Event) => {
    event.preventDefault();
    event.stopPropagation();
    toPage('/bookOut');
};
const getHomeInfo = () => {
    //获取当前状态
    bookApi.nowInfo().then((res) => {
        console.log("nowInfo", res);
        homeInfo.value = res
    });
    authApi.getUserInfo().then((res) => {
        console.log("getUserInfo", res);
        userInfo.value = res
    });
    //获取当前状态
    bookApi.newBooks().then((res) => {
        console.log("nowInfo", res);
        recommendedBooks.value = res
    });
};

/** 初始化 **/
onMounted(() => {
    getHomeInfo();
})

const show = ref(false);
const actions = [
    {name: '修改密码'},
    {name: '退出登录'},
    {name: '关于'},
];
const onSelect = (item) => {
    show.value = false;
    if (item.name == "修改密码") {
        toPage('/updatePwd')
    } else if (item.name == "关于") {
        toPage('/aboutUs')
    } else if (item.name == "退出登录") {
        showConfirmDialog({
            title: '退出确认',
            message:
                '即将退出系统，返回登录页',
        }).then(() => {
            localStorage.removeItem("token");
            authApi.logout().then((res) => {
                showToast({
                    message: '退出成功',
                    duration: 1500,
                    onClose: () => {
                        router.push({path: '/'})
                    }
                });
            });
        }).catch(() => {
            // on cancel
        });
    }
};
</script>

<style scoped lang="scss">
.home-container {
    padding: 0rem 1rem 2rem;
    background-color: #f5f5f5;

    .page-title {
        margin-top: 1.5rem;
        text-align: center;
        font-size: 1.5rem;
        font-weight: bold;
        margin-bottom: 1rem;
        color: #047857;
    }

    .page-subtitle {
        font-size: 1rem;
        text-align: center;
        margin-bottom: 1.5rem;
        color: #999;
        font-weight: 100;
    }

    .stats-card {
        margin: 20px 0;
        background-color: rgba(255, 255, 255, 0.6); /* 半透明背景 */
        backdrop-filter: blur(10px); /* 毛玻璃效果 */
        border-radius: 10px;
        padding: 15px;

        span {
            font-size: 14px;
            color: #059669; /* 文字颜色调整为绿色系 */
        }

        strong {
            font-size: 20px;
            color: #059669; /* 文字颜色调整为深绿色 */
        }
    }

    .action-buttons {
        display: flex;
        gap: 20px;
        margin: 20px 0;
        justify-content: center;

        .van-button {
            width: 100%;
            cursor: pointer;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(180, 180, 180, 0.08);
            -webkit-tap-highlight-color: transparent;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
            touch-action: manipulation;
            -ms-touch-action: manipulation;
            -webkit-user-drag: none;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            outline: none;
            -webkit-focus-ring-color: transparent;
        }
    }

    .my-books-card,
    .recommendations-card {
        margin-top: 20px;
        background-color: rgba(255, 255, 255, 0.6); /* 半透明背景 */
        border-radius: 10px;
        overflow: hidden;
    }
}

.card-container {
    margin-top: -10px;
    height: 50px;
    border-radius: 0 0 8px 8px;
}

.top-l-box {
    background-color: #e0f2fe !important;
    color: #075985;
    font-size: .9rem;
}

.top-r-box {
    background-color: #ccfbf1 !important;
    color: #115e59;
    font-size: .9rem;
}

.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    height: 13rem;
    border-radius: 8px;
    overflow: hidden;
}

.main-footer {
    text-align: center;
    margin-top: .2rem;
    color: #ccc;
    font-size: .7rem;
    font-weight: lighter;
}

::v-deep .van-cell__title span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-btn {
    border-radius: 6px;
    border: none;
    height: 50px;
    font-size: 18px
}
</style>
